<template>
  <div class="bg-[#f7fafb]" id="div-1">
    <div class="w-8/12 mx-auto py-[30px]" id="div-2">
      <a-row :gutter="20" id="a-row-3">
        <a-col :span="16" id="a-col-4">
          <a-typography-paragraph class="!mb-0 bg-[#fff]" id="a-typography-paragraph-5">
            <a-typography-link href="#" class="inline-flex items-center justify-center w-1/2 !text-[#fff] text-[22px] text-center bg-[#0459a8] leading-[59px]" id="a-typography-link-6">
              <MailFilled class="text-[#fff] text-[40px] mr-2" id="mailFilled-7"></MailFilled>市场信箱（信访入口）
            </a-typography-link>
            <a-typography-link href="#" class="inline-flex items-center justify-center w-1/2 !text-[#333] text-[22px] text-center leading-[59px]" id="a-typography-link-8">
              <MessageFilled class="text-[#0459a8] text-[40px] mr-2" id="messageFilled-9"></MessageFilled>在线咨询（咨询入口）
            </a-typography-link>
          </a-typography-paragraph>
          <a-card :bordered="false" class="pt-[15px] px-5 pb-5 !shadow-none rounded-none" id="a-card-10">
            <a-flex align="center" justify="space-between" gap="30" id="a-flex-11">
              <a-typography-link href="#" v-for="(item, index) of mainListData1" :key="index" class="inline-flex items-center justify-center w-1/3 bg-[#eaf0f6]" :id="`a-typography-link-12-${index}`">
                <EditOutlined v-if="index % 3 === 0" class="mr-10 text-[#055fb2] text-[26px]" :id="`editOutlined-13-${index}`"></EditOutlined>
                <SearchOutlined v-if="index % 3 === 1" class="mr-10 text-[#055fb2] text-[26px]" :id="`searchoutlined-14-${index}`"></SearchOutlined>
                <BarChartOutlined v-if="index % 3 === 2" class="mr-10 text-[#055fb2] text-[26px]" :id="`barchartoutlined-15-${index}`"></BarChartOutlined>
                <a-typography-text class="text-[#37150e] text-xl font-bold leading-[59px]" :id="`a-typography-text-16-${index}`">{{item}}</a-typography-text>
              </a-typography-link>
            </a-flex>
            <a-flex align="center" justify="space-between" class="mt-5 border-0 !border-b border-[#0064c2] border-solid" id="a-flex-17">
              <a-typography-text class="text-[#122e5c] text-2xl font-bold leading-[43px]" id="a-typography-text-18">信件列表</a-typography-text>
              <a-typography-link href="#" class="!text-[#333] text-base" id="a-typography-link-19">
                更多
                <DoubleRightOutlined id="doubleRightOutlined-20"></DoubleRightOutlined>
              </a-typography-link>
            </a-flex>
            <a-list :data-source="mainListData2" class="mt-[15px]" id="a-list-21">
              <template #renderItem="{item, index}">
                <a-list-item class="!p-0 !border-0" :id="`a-list-item-22-${index}`">
                  <a-row class="w-full" :id="`a-row-23-${index}`">
                    <a-col :span="1" class="flex items-center justify-center" :id="`a-col-24-${index}`">
                      <a-badge color="#c9c9c9" :id="`a-badge-25-${index}`"></a-badge>
                    </a-col>
                    <a-col :span="17" :id="`a-col-26-${index}`">
                      <a-typography-link href="#" ellipsis :content="item.title" class="!text-[#282828] text-lg leading-[42px]" :id="`a-typography-link-27-${index}`"></a-typography-link>
                    </a-col>
                    <a-col :span="6" class="flex items-center justify-end" :id="`a-col-28-${index}`">
                      <a-typography-text class="text-[#9a9a9a] text-lg" :id="`a-typography-text-29-${index}`">{{item.date}}</a-typography-text>
                    </a-col>
                  </a-row>
                </a-list-item>
              </template>
            </a-list>
            <a-row :gutter="30" class="mt-5" id="a-row-30">
              <a-col :span="12" id="a-col-31">
                <div class="w-full aspect-[367/287] border border-[#e2e2e2] border-solid" id="echartsDOM1"></div>
              </a-col>
              <a-col :span="12" id="a-col-33">
                <div class="w-full aspect-[367/287] border border-[#e2e2e2] border-solid" id="echartsDOM2"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="8" id="a-col-35">
          <a-typography-link href="#" class="flex items-center justify-evenly bg-gradient-to-br from-[#e8f3fd] to-[#b1d6f9] rounded-lg" id="a-typography-link-36">
            <WeiboSquareFilled class="text-[#055fb2] text-[50px]" id="weibosquareFilled-37"></WeiboSquareFilled>
            <a-typography-text class="text-[#236bb7] text-[22px] font-bold leading-[70px]" id="a-typography-text-38">问题知识库</a-typography-text>
            <ArrowRightOutlined class="text-[#055fb2] text-[30px]" id="arrowrightoutlined-39"></ArrowRightOutlined>
          </a-typography-link>
          <template v-for="(item1, index1) of mainListData3" :key="index1">
            <a-card :bordered="false" class="py-[15px] pr-5 pl-[13px] !shadow-none rounded-none" :class="{'!pt-0': index1 !== 0}" :id="`a-card-40-${index1}`">
              <a-typography-paragraph class="!mb-0 mt-[26px] text-[#333] text-[22px] leading-[29px]" :id="`a-typography-paragraph-41-${index1}`">{{item1.title}}</a-typography-paragraph>
              <a-typography-paragraph class="!mb-0 w-[12%]" :id="`a-typography-paragraph-42-${index1}`">
                <a-divider class="!mb-0 !mt-2 border-[#333]" :id="`a-divider-43-${index1}`"></a-divider>
              </a-typography-paragraph>
              <a-list :data-source="item1.listData" class="mt-[22px]" :id="`a-list-44-${index1}`">
                <template #renderItem="{item, index}">
                  <a-list-item class="!p-0 !border-0" :id="`a-list-item-45-${index}-${index1}`">
                    <a-row class="w-full" :id="`a-row-46-${index}-${index1}`">
                      <a-col :span="1" class="flex items-center justify-center" :id="`a-col-47-${index}-${index1}`">
                        <a-badge color="#c9c9c9" :id="`a-badge-48-${index}-${index1}`"></a-badge>
                      </a-col>
                      <a-col :span="18" :id="`a-col-49-${index}-${index1}`">
                        <a-typography-link href="#" ellipsis :content="item.title" class="!text-[#282828] text-lg leading-[42px]" :id="`a-typography-link-50-${index}-${index1}`"></a-typography-link>
                      </a-col>
                      <a-col :span="5" class="flex items-center justify-end" :id="`a-col-51-${index}-${index1}`">
                        <a-typography-text class="text-[#9a9a9a] text-base" :id="`a-typography-text-52-${index}-${index1}`">{{item.date}}</a-typography-text>
                      </a-col>
                    </a-row>
                  </a-list-item>
                </template>
              </a-list>
            </a-card>
          </template>
        </a-col>
      </a-row>
    </div>
  </div>
</template>


<script setup>
import * as echarts from 'echarts';
const mainListData1 = ["我要写信", "结果查询", "满意度统计"];
const mainListData2 = [
  { title: "感谢政府帮助协调解决小区地下停车场电信信号覆盖问题", date: "答复时间：2025-02-11" },
  { title: "感谢政府帮助我们民工要回拖欠的工资", date: "答复时间：2024-12-19" },
  { title: "购买手机有问题，找售后一直推脱说监测处理", date: "答复时间：2024-11-14" },
  { title: "关于白云区恒力未来天骄装修押金退款事宜", date: "答复时间：2024-10-18" },
  { title: "投诉贵州悠客旅行社有限公司车费退款问题", date: "答复时间：2024-09-18" },
  { title: "感谢信", date: "答复时间：2024-08-07" },
]
const mainListData3 = [
  {
    title: "最新常见问题",
    listData: [
      { title: "惠民惠农财政补贴政策文件可以通过哪些渠道查询？", date: "2025-03-03" },
      { title: "投资性公司是否可从事生产制造?", date: "2025-03-03" },
      { title: "怎么申请汽车以旧换新补贴?", date: "2025-02-26" },
      { title: "什么是林长制?", date: "2025-02-26" },
      { title: "草原资源调查包含哪些内容?", date: "2025-02-26" },
      { title: "当事人在人民调解活动中应当履行哪些义务？", date: "2025-02-26" },
    ]
  },
  {
    title: "最热常见问题",
    listData: [
      { title: "亲属投靠指的是哪些亲属关系的户口迁入？需要什么材料？", date: "2025-02-26" },
      { title: "农作物秸秆如何科学处理", date: "2025-02-24" },
      { title: "退役义务兵易地安置需符合哪些条件?", date: "2025-02-17" },
      { title: "灵活就业人员享受生育补助金需要符合哪.", date: "2025-02-10" },
      { title: "儿童流感该如何治疗和预防?", date: "2025-01-24" },
      { title: "被派遣劳动者若出现工伤如何处理?", date: "2025-01-23" },
    ]
  },
]
onMounted(() => {
  const chart1 = echarts.init(document.getElementById('echartsDOM1'));
  const option1 = {
    title: {
      text: '开通以来总览',
      top: 10,
      x: "center",
      textStyle: {
        x: "center",
      }
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['累计已受理', '累计已办理', '办理中']
    },
    yAxis: {
      type: 'value',
      max: 75000,
      interval: 25000
    },
    series: [
      {
        type: 'bar',
        barWidth: "50%",
        data: [
          {
            value: 71153,
            itemStyle: {
              color: "#39d8b2",
            }
          },
          {
            value: 71081,
            itemStyle: {
              color: "#7db119",
            }
          },
          {
            value: 72,
            itemStyle: {
              color: "#7db119",
            }
          },
        ],
        itemStyle: {
          color: "#7db119"
        }
      },
    ]
  };
  chart1.setOption(option1);
  const chart2 = echarts.init(document.getElementById('echartsDOM2'));
  const option2 = {
    title: {
      text: '2025年总览',
      top: 10,
      x: "center",
      textStyle: {
        x: "center",
      }
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "3%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月']
    },
    yAxis: {
      type: 'value',
      max: 300,
      interval: 100
    },
    legend: {
      show: true,
      bottom: "5%",
    },
    series: [
      {
        name: "已受理",
        type: 'bar',
        data: [248, 176, 26],
        itemStyle: {
          color: "#7db119"
        }
      },
      {
        name: "已办理",
        type: 'bar',
        data: [146, 129, 3],
        itemStyle: {
          color: "#39d8b2"
        }
      },
    ]
  };
  chart2.setOption(option2);
})
</script>
<style scoped></style>